<template>
	<view v-if="info._id">
		<!-- 左侧红包 -->
		<view class="r_bag" :class="info.position">
			<image class="bag1" :animation="bag1animation"
				src="https://7463-tcb-mkgeroyc82b684-1d3xg5a2a923f-1304205492.tcb.qcloud.la/redbag/bag2.png" mode=""
				@click="openrbagbtn()">
			</image>
		</view>

		<!-- 红包封面 -->
		<view class="rbag_model" v-if="rbagmodelshow" @touchmove.prevent.stop>
			<view class="rbag_con hidden">
				<view class="rbag_top">
					<view class="rbag_top_info">
						<image class="rbag_logo" :src="userAvatar" mode=""></image>
						<view class="app_name">{{info.blessing}}</view>
						<view class="rbag_tips">{{info.title}}</view>
					</view>
				</view>
				<view class="open_rbag_btn" :animation="openbrnanimation" @click="openbtn()">{{info.open}}</view>
			</view>
			<view class="rbag_con">
				<view class="hide_btn" @click.stop="hidebtn">
					<icon type="cancel" color="#fbd977" size="28" />
				</view>
			</view>
		</view>

		<!-- 打开红包 -->
		<view class="open_rbag_model" v-if="openrbagmodelshow" @touchmove.prevent.stop>
			<image class="rbag_conbg" :src="info.background">
			</image>
			<view class="rbag_conbg open_rbag_con">
				<view class="open_title">— 恭喜您获得 —</view>
				<view class="rbag_detail">
					<view class="open_money">
						<tian-countup :num="info.money" color="#c95948" width='21' height='34' fontSize='34'>
						</tian-countup>
						<view class="danwei">元</view>
					</view>
					<view class="open_tips" v-if="info.payment=='balance'">已存入钱包，可直接提现</view>
					<view class="open_tips" v-else-if="info.payment=='wxpay'">已存入您的微信余额</view>
					<view class="open_tips" v-else-if="info.payment=='alipay'">已存入您的支付宝余额</view>
				</view>
				<view class="lookbag_box">
					<view class="lookbag_btn">
						<view class="text" @click.stop="lookbagbrn()" v-if="info.payment=='balance'">查看我的钱包</view>
						<view class="text" @click.stop="close()" v-else>开心收下</view>

					</view>
				</view>
				<view class="hide_btn" @click.stop="hideopenbtn()">
					<icon type="cancel" color="#fbd977" size="28" />
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				bag1animation: {},
				openbrnanimation: {},
				rbagmodelshow: false,
				openrbagmodelshow: false,
			};
		},
		props: {
			type: String
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			},
			userAvatar() {
				if (this.userInfo.hasAvatar) {
					return this.userInfo.avatar
				}
				return this.info.avatar
			}
		},
		created() {
			// this.imageanimation();
			//注册红包事件
			// uni.$on("redbag", (type) => {
			// 	//查询红包类型
			// 	this.getRedInfo()
			// })
			this.getRedInfo(this.type)
		},
		methods: {
			getRedInfo(type) {
				console.log("红包查询", this.userInfo)
				//必须登录后才有领取权限
				if (this.userInfo._id) {
					this.$request("user/redbag/info", {
						type
					}).then(data => {
						console.log("红包查询结果", data)
						if (data) {
							this.info = data;
							if (data.auto_show) {
								//延时一点点打开
								setTimeout(() => {
									this.openrbagbtn()
								}, 2000)
							}
							this.imageanimation();
						}
					})
				}
			},
			// 侧边红包 => 动画
			imageanimation: function() {
				var that = this;
				var next = true;
				var animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease',
				})
				that.bag1animation = animation
				setInterval(function() {
					if (next) {
						animation.rotate(36).step();
						next = !next;
					} else {
						animation.rotate(6).step();
						next = !next;
					}
					that.bag1animation = animation.export()
				}, 1100)
			},
			// 侧边红包 => 点击
			openrbagbtn: function() {
				console.log("弹出红包")
				this.rbagmodelshow = true;
			},

			// 红包封面 => 关闭按钮
			hidebtn: function() {
				this.rbagmodelshow = false;
			},
			// 红包封面 => 開红包按钮
			openbtn: function() {
				var that = this;
				var animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease',
				})
				that.openbrnanimation = animation;
				// animation.rotate3d(0,1,0,360).step();
				animation.rotateY(360).step();
				that.openbrnanimation = animation.export();
				//调用api
				this.$request("user/redbag/receive", this.info).then(data => {
					if (!data) {
						//领取失败
						// this.$message("领取失败！")
						return;
					}
					this.info.money = data.money;
					this.info.payment = data.payment;
					that.rbagmodelshow = false;
					that.openrbagmodelshow = true;
					that.openbrnanimation = {};
				}, (err) => {
					// this.$message(err.message || "领取失败！")
					this.close()
					return;
				})
			},

			// 打开红包  => 关闭按钮
			hideopenbtn: function() {
				//关闭整个红包
				this.close()
				this.openrbagmodelshow = false;
			},
			// 打开红包  => 查看钱包
			lookbagbrn: function() {
				this.hideopenbtn()
				uni.navigateTo({
					url: "/pages/index/user"
				})
			},
			close() {
				//销毁红包
				this.info = {}
			}
		},
	}
</script>

<style lang="scss">
	.r_bag {
		.bag1 {
			position: fixed;
			left: -46rpx;
			top: 160rpx;
			width: 150rpx;
			height: 100rpx;
			z-index: 999;
		}

		&.leftDown .bag1 {
			top: auto;
			bottom: 160rpx;
		}

		&.rightTop .bag1 {
			left: auto;
			right: -66rpx;
		}

		&.rightDown .bag1 {
			top: auto;
			left: auto;
			right: -66rpx;
			bottom: 160rpx;
		}

		&.none .bag1 {
			display: none;
		}
	}

	// 红包封面
	.rbag_model {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 1000;

		.rbag_con {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 80%;
			height: 840rpx;
			background-color: #da4d44;
			margin: auto;
			border-radius: 14rpx;
			box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2);

			.rbag_top {
				position: absolute;
				left: -20%;
				top: 0;
				width: 140%;
				height: 540rpx;
				background-color: #e0534a;
				border-radius: 0 0 50% 50%;
				box-shadow: 0 0 14rpx rgba(0, 0, 0, 0.4);
				z-index: 1001;

				.rbag_top_info {
					margin-top: 60rpx;

					.rbag_logo {
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
						display: block;
						margin: 0 auto;
						overflow: hidden;
					}

					.app_name {
						font-size: 38rpx;
						color: #f6ac96;
						text-align: center;
						margin-top: 18rpx;
						letter-spacing: 1rpx;
					}

					.rbag_tips {
						font-size: 50rpx;
						color: #edddd3;
						text-align: center;
						margin-top: 34rpx;
						letter-spacing: 1rpx;
					}
				}
			}

			.open_rbag_btn {
				position: absolute;
				top: 450rpx;
				left: 0;
				right: 0;
				width: 180rpx;
				height: 180rpx;
				line-height: 180rpx;
				border-radius: 50%;
				margin: 0 auto;
				text-align: center;
				background-color: #ffd287;
				font-size: 55rpx;
				color: #fef5e8;
				box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
				z-index: 1002;
			}

			.hide_btn {
				position: absolute;
				bottom: -110rpx;
				left: 0;
				right: 0;
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin: 0 auto;
			}
		}

		.hidden {
			overflow: hidden;
		}
	}

	// 打开红包
	.open_rbag_model {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 1000;

		.rbag_conbg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 80%;
			height: 840rpx;
			margin: auto;
			z-index: 1001;
		}

		.open_rbag_con {
			z-index: 1002;

			.open_title {
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				font-size: 38rpx;
				letter-spacing: 2rpx;
				color: #e46965;
			}

			.rbag_detail {
				margin-top: 90rpx;

				.open_money {
					text-align: center;
					font-size: 80rpx;
					color: #c95948;
					font-weight: bold;
					display: flex;
					justify-content: center;

					.danwei {
						font-size: 30rpx;
						margin-left: 16rpx;
						margin-top: 24rpx;
					}
				}

				.open_tips {
					text-align: center;
					font-size: 30rpx;
					color: #d26762;
					margin-top: 30rpx;
				}
			}

			.lookbag_box {
				margin-top: 200rpx;
				display: flex;
				justify-content: center;

				.lookbag_btn {
					width: 70%;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					font-size: 32rpx;
					color: #c95948;
					letter-spacing: 2rpx;
					background-color: #ffd356;
					border-radius: 50rpx;
					box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, 0.2);
				}
			}

			.hide_btn {
				position: absolute;
				bottom: -110rpx;
				left: 0;
				right: 0;
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin: 0 auto;
			}
		}
	}
</style>
